iT邦幫忙

DAY 19
5

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 19

MIS2000Lab.的「HTML5 認證考試,從零開始」#19--HTML5 Geolocation API

  • 分享至 

  • xImage
  •  

上一篇文章:http://ithelp.ithome.com.tw/question/10159592

前兩篇文章包含本文,都是介紹HTML5 API

今天終於分享到 -- HTML5 Geolocation API(地理位置API)

對於行動周邊(平板、智慧手機)來說,位置感知(Location Awareness)是很重要的特色。

HTML5 Geolocation API甚至可以得知行動周邊的經緯度(longitude、latitude)、高度(altitude)等等資訊。

應用層面如下:

[ul] [li]讀取目前位置,導引到下一個位置(目的地)。[/li] [li]推估行動距離(距離目的地還有多遠?大概需要多少時間?)。[/li][/ul]

==== 接收(Request)地理位置的資訊 ====

下面的範例使用高精準度的資訊(enableHighAccuracy: true)

而且定義五秒內(500毫秒)必須有回應,不然就逾時(time out)。

navigator.geolocation.getCurrentPosition(myPositionCallbackFunction,
myPositionErrorCallbackFunction,
{enableHighAccuracy: true,  timeout: 5000} );

[img=415,324]http://ithelp.ithome.com.tw/upload/images/20141014/20141014100649543c8539c23b8_resize_600.jpg[/img]

==== 處理(Process)地理位置的資訊 ====

上一小節提到的兩個方法,.getCurrentPosition()方法與 .watchPosition()方法。

Call-back功能都有一個coords屬性,其中包含下面三者的座標資訊(coordinate information):

[ul] [li]latitude。緯度,單位:度(degree)。[/li] [li]longitude。經度,單位:度。[/li] [li]Accuracy。精準度,單位:公尺(meter)。[/li][/ul]

這個範例源自w3school網站 -- http://www.w3schools.com/html/html5_geolocation.asp

<p id="demo">Click the button to get your coordinates:</p>

<button onclick="getLocation()">Try It</button>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "抱歉!瀏覽器不支援Geolocation";
    }
}

function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br /> Longitude: " + position.coords.longitude;	
}
</script>

==== 處理地理位置的錯誤(例外狀況)====

function showError(error) 
{
    switch(error.code)  {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;

        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;

        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;

        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
 }

最後要分享一個整合的範例

源自w3School的範例(Geolocation_API_GoogleMap.html),搭配Google Map偵測您的所在位置

(http://www.w3schools.com/html/html5_geolocation.asp)。

[img=415,216]http://ithelp.ithome.com.tw/upload/images/20141014/20141014101114543c8642a3faf_resize_600.jpg[/img]

不要走開,馬上回來

請看下一篇文章 http://ithelp.ithome.com.tw/question/10160001

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#18--HTML5與多媒體的整合
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#20--Session storage
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言